<template>
	<view>
		<uni-titles :title="'开始圈地'"></uni-titles>
		<view class="mapsbox" :style="'height:' + pageH">
			<view class="bgimg"><u--image :mode="'aspectFill'" :src="bgimg" width="100%" :height="pageH"></u--image></view>
			<view class="topbox pos">
				<view class="Stepbox">
					<u-steps current="0" activeIcon="checkmark" :activeColor="'#64C533'" :inactiveColor="'#A1D6BA'">
						<u-steps-item v-for="(d, index) in steplist" :title="d.name" :key="d.name">
							<view class="steptop" :class="{ act: index<1 }" slot="icon">{{ d.id }}</view>
						</u-steps-item>
					</u-steps>
				</view>
				<view class="titleText fs-24 mar-top12">操作提示：请你在地块边缘打点圈地！</view>      
			</view>
			<view class="rightbox pos">
				<view class="item" v-for="(d, index) in rightList" :key="d.name" @click="_click(d.name)">
					<u--image :mode="'aspectFit'" :src="d.img" width="34rpx" height="34rpx"></u--image>
					<text class="fs-24" :style="'color:' + d.color">{{ d.name }}</text>
				</view>
			</view>
			<view class="bottombox pos">
				<view class="btn"><u-button color="#B2CEA4" @click="_click('退出圈地')">退出圈地</u-button></view>
				<view class="btn"><u-button color="#64C533" @click="_click('保存')">保存</u-button></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			bgimg:
				'',
			rightList: [
				{
					name: '撤销',
					color: '#fff',
					img:
						''
				},
				{
					name: '恢复',
					color: '#64C533',
					img:
						''
				},
				{
					name: '情况',
					color: '#FF921E',
					img:
						''
				}
			],
			steplist: [{ name: '创建田块', id: 1 }, { name: '选择种植', id: 2 }, { name: '选择资源', id: 3 }],
			// act: 0,
			// t:''
		};
	},
	computed: {
		pageH: function() {
			// #ifdef H5
			return 'calc(100vh - 88rpx)';
			// #endif
			// #ifdef MP-WEIXIN
			return 'calc(100vh - 128rpx)';
			// #endif
		}
	},
	onShow(){
			// this.stepChange()
	},
	onHide(){
		clearInterval(this.t)
	},
	methods:{
			// stepChange(){
			// 	this.t = setInterval(()=>{
			// 		this.act++
			// 		if(this.act == 3){
			// 			this.act=0
			// 		}
			// 	},1500)
			// },
			_click(d){
				if(d=='退出圈地'){
					uni.navigateBack({
						delta:1
					})
				}else if(d=='保存'){
					uni.navigateTo({
						url: '/subpkg/drawmaps/plant',
					});
				}
					
				
			}
	}
};
</script>

<style lang="scss">
.mapsbox {
	background: #ddd;
	position: relative;
	.bgimg {
		height: 100%;
	}
	.pos {
		position: absolute;
	}
	.topbox {
		top: 0;
		width: 100%;
		.Stepbox {
			height: 90rpx;
			padding-top: 12rpx;
			background: rgba(255, 255, 255, 0.5);
			.steptop {
				background: #a1d6ba;
				color: #fff;
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				line-height: 40rpx;
				text-align: center;
			}
			.act {
				background: #07c160;
			}
		}
		.titleText {
			background: rgba(0, 0, 0, 0.5);
			color: #ffd21f;
			margin-left: 30rpx;
			margin-right: 30rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			border-radius: 8rpx;
		}
	}
	.rightbox {
		top: 50%;
		right: 0;
		transform: translate(0, -50%);
		.item {
			background: rgba(0, 0, 0, 0.5);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-bottom: 20rpx;
			border-radius: 8rpx;
			width: 80rpx;
			height: 80rpx;
		}
	}
	.bottombox {
		height: 100rpx;
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		.btn {
			width: 280rpx;
			margin: 0 24rpx;
		}
	}
}
</style>
